<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 200px;
				height: 200px;
				background-color: red;
				/*
				浮动的元素不会盖住文字，文字会自动环绕在浮动元素周围。
				块元素脱离文档流以后，高度和宽度都被内容撑开。
				内联元素脱离文档流之后，会变成块元素。
				*/
				float: left;
			}

			.p1 {
				/* height: 200px; */
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<p class="p1">
			2222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			22222222222223332222222222222222
			2222222222222333
			33333333333333333333333333333333333333222222222222222222222222222233333333333333333333333333333333333333333222222222222222222222222222223333333333333333333333333333333333333333322222222222222222222222222222333333333333333333333333333333333333333332222222222222222222222222222233333333333333333333333333333333333333333
		</p>
	</body>
</html>
